<script setup lang="ts">
import CopyOutlined from "@ant-design/icons-vue/CopyOutlined";
import {message} from "ant-design-vue";
import ProductCategory from "~/contentScripts/views/wxt/BatchAddingProducts/components/productCategory.vue";

// 选择计划Table
import {WxtBiddingConstraintType, WxtBizCode, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";

const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode.关键字推广,
  },
  promotionScene: {
    type: String as PropType<WxtBiddingConstraintType>,
    default: WxtBiddingConstraintType.促进全店成交,
  },
});


const loading = ref(false);
const plans = ref([]);
const search = ref('');
const loadPlans = (offset: number = 0, pageSize: number = 100) => {
  loading.value = true;
  if (offset === 0) {
    plans.value = [];
  }
  WxtUtils.customRequest('https://one.alimama.com/campaign/horizontal/findPage.json', props.bizCode, {
    offset: 0,
    pageSize: 100,
  }).then((res: any) => {
    if (res.data.info.ok) {
      plans.value = res.data.data.list;
      if (res.data.data.list.length === 100) {
        loadPlans(offset + 100, 100);
      }
    } else {
      message.error(res.data.info.message);
    }
  }).finally(() => {
    loading.value = false;
  });
};
const columns = [
  {
    title: '状态',
    dataIndex: 'displayStatus',
    dataType: 'custom',
    width: 50,
    slot: 'displayStatus',
    fixed: 'left',
  },
  {
    title: '计划名称',
    dataIndex: 'campaignName',
    dataType: 'custom',
    width: 200,
    slot: 'campaignName',
    fixed: 'left',
  },
  {
    title: '单元数量',
    dataIndex: 'adgroupCount',
    dataType: 'customRender',
    width: 80,
    render: (text: number, record: any) => {
      return record.adgroupList.length;
    },
  },
  {
    title: '预算',
    dataIndex: 'dayBudget',
    dataType: 'customRender',
    width: 100,
    render: (text: number, record: any) => {
      return record.dayBudget + '元/日';
    },
  },
  {
    title: '分时折扣',
    dataIndex: 'launchPeriodDiscount',
    width: 120,
  }
];
const copy = (text: string) => {
  navigator.clipboard.writeText(text).then(() => {
    message.success('复制成功')
  }).catch(() => {
    message.error('复制失败')
  });
}
onMounted(() => {
  loadPlans();
});
const selectRows = ref<any[]>([]);
const remove = (campaignIds: number[]) => {
  // console.log(campaignIds);
  // 从selectRows中移除
  selectRows.value = selectRows.value.filter((r) => !campaignIds.includes(r.campaignId));
}
const emit = defineEmits([
  "prev",
  "next",
  "update:value",
]);
watch(() => selectRows.value, (val) => {
  emit('update:value', val);
});
const tableBox = ref<HTMLDivElement | null>(null);
const tableWidth = ref(0);
watch(() => tableBox.value, (val) => {
  if (val) {
    tableWidth.value = val.clientWidth;
  }
}, {
  deep: true,
});
onMounted(() => {
  if (tableBox.value) {
    tableWidth.value = tableBox.value.clientWidth;
  }
  window.addEventListener('resize', () => {
    if (tableBox.value) {
      tableWidth.value = tableBox.value.clientWidth;
    }
  });
});
onUnmounted(() => {
  window.removeEventListener('resize', () => {
    if (tableBox.value) {
      tableWidth.value = tableBox.value.clientWidth;
    }
  });
});
</script>

<template>
  <a-row type="flex" :gutter="16">
    <a-col flex="1" style="overflow: hidden;" ref="tableBox">
      <base-table :columns="columns" selection row-key="campaignId" v-model:selected-rows="selectRows"
                  :loading="loading"
                  pagination :data-source="plans" title="推广计划" :scroll="{
    y: 600,
    x: tableWidth,
  }"
      >
        <template #displayStatus="row">
          <a-tag :color="row.displayStatus === 'start' ? 'green' : 'red'">{{ row.displayStatus === 'start' ? '推广中' : '已暂停' }}</a-tag>
        </template>
        <!--        <template #toolbar>-->
        <!--          <a-space>-->
        <!--            <product-category v-model:value="categoryId"/>-->
        <!--            <div>-->
        <!--              搜索类型：-->
        <!--              <a-select v-model:value="searchType" style="width: 100px" size="small">-->
        <!--                <a-select-option :value="Type.campaignId">计划ID</a-select-option>-->
        <!--                <a-select-option :value="Type.title">计划标题</a-select-option>-->
        <!--              </a-select>-->
        <!--            </div>-->
        <!--            <a-input size="small" v-model:value="search"-->
        <!--                     :placeholder="searchType===Type.campaignId?'可输入多个ID,分隔':'请输入计划标题'"-->
        <!--            />-->
        <!--            <a-button type="primary" size="small" @click="loadPlans" :loading="loading">搜索</a-button>-->
        <!--          </a-space>-->
        <!--        </template>-->
        <template #campaignName="row">
          <a-row type="flex" class="adgroupName" :gutter="5">
            <!--            <a-col>-->
            <!--              <a-popover placement="right">-->
            <!--                <template #content>-->
            <!--                  <img :src="row.imgUrl"-->
            <!--                       style="width: 200px;height: 200px;"-->
            <!--                  />-->
            <!--                </template>-->
            <!--                <img :src="row.imgUrl"-->
            <!--                     style="width: 60px;height: 60px;border-radius: 5px;"-->
            <!--                />-->
            <!--              </a-popover>-->
            <!--            </a-col>-->
            <a-col flex="1" class="title">
              <a-tooltip :title="row.title">
              <span style="
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;"
              >{{ row.campaignName }}</span>
              </a-tooltip>
              <div>
                <a-space>
                  <span style="color: #666;">ID: {{ row.campaignId }}</span>
                  <CopyOutlined style="color: #1677ff;cursor: pointer;font-size: 12px;" @click="copy(row.campaignId)"/>
                </a-space>
              </div>
            </a-col>
          </a-row>
        </template>
      </base-table>
    </a-col>
    <div style="width: 350px;height:690px;border: 1px solid rgb(245, 245, 245);display: flex;flex-direction: column;">
      <a-row class="top">
        <a-col flex="1">
          已选 <span style="color: #1677ff;">{{ selectRows.length }}</span> 个计划
        </a-col>
        <a-col>
          <a-button size="small" danger type="link" @click="remove(selectRows.map((r)=>r.campaignId))">全部移除
          </a-button>
        </a-col>
      </a-row>
      <div style="flex: 1;overflow: hidden;overflow-y: auto;">
        <a-row type="flex" :gutter="5" v-for="row in selectRows" style="padding:10px;border-bottom: 1px solid #eee;"
               :key="row.campaignId" class="product"
        >
<!--          <a-col>-->
<!--            <a-popover placement="right">-->
<!--              <template #content>-->
<!--                <img :src="row.imgUrl"-->
<!--                     style="width: 200px;height: 200px;"-->
<!--                />-->
<!--              </template>-->
<!--              <img :src="row.imgUrl"-->
<!--                   style="width: 42px;height: 42px;border-radius: 5px;"-->
<!--              />-->
<!--            </a-popover>-->
<!--          </a-col>-->
          <a-col flex="1" class="two-line">
            {{ row.campaignName }}
          </a-col>
          <a-col>
            <a-button size="small" danger type="link" @click="remove([row.campaignId])">移除</a-button>
          </a-col>
        </a-row>
      </div>
    </div>
  </a-row>
  <a-divider style="margin-top: 10px;"/>
  <a-row type="flex">
    <a-col flex="1">
    </a-col>
    <a-col>
      <a-space>
        <a-button @click="emit('prev',[])">上一步</a-button>
        <a-button type="primary" @click="()=>{
        if(selectRows.length===0){
          message.error('请选择计划');
          return;
        }
      emit('next',selectRows);
    }"
        >下一步
        </a-button>
      </a-space>
    </a-col>
    <a-col flex="1">
    </a-col>
  </a-row>
</template>

<style lang="less" scoped>

.product {
  .title {
    // 一行超出隐藏
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hover-show {
    display: none;
  }

  &:hover {
    .hover-show {
      display: block;
    }
  }
}

.top {
  background: rgb(249, 249, 249);
  padding: 10px;
  border-radius: 7px;
  color: #444;
}

.two-line {
  // 文字超出两行省略号
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  //height: 42px;
}
</style>
